<template>
  <div class="login">
    <van-nav-bar left-arrow @click-left="onClickLeft" />
    <van-cell>
      <div class="logger">您好，请先登录</div>
      <van-form @submit="onSubmit">
        <van-cell-group>
          <van-field
            v-model="mobile"
            label=""
            placeholder="请输入手机号"
            :rules="rules.mobile"
          >
            <template #left-icon>
              <i class="iconfont iconbianzu1"></i>
            </template>
          </van-field>
          <van-field
            v-model="code"
            center
            clearable
            label=""
            placeholder="请输入短信验证码"
            :rules="rules.code"
          >
            <template #left-icon>
              <i
                class="iconfont iconyanzhengma
"
              ></i>
            </template>
            <template #button>
              <van-button
                size="small"
                @click="coded"
                native-type="button"
                v-if="istime"
                >{{ time }}s重试</van-button
              >
              <van-button
                size="small"
                @click="coded"
                native-type="button"
                v-else
                >发送验证码</van-button
              >
            </template>
          </van-field>
        </van-cell-group>
        <div class="agree">
          登录既同意<span>《用户使用协议》</span>和<span>《隐私协议》</span>
        </div>
        <van-button round type="danger" block :loading="isLoading"
          >登录</van-button
        >
      </van-form>
    </van-cell>
  </div>
</template>

<script>
import { getCode, login } from '@/api/api.js'
import { setLocal } from '@/utils/local.js'
export default {
  data () {
    return {
      mobile: '18888881111',
      code: '',
      isLoading: false,
      time: 60,
      istime: false,
      timeTask: null,
      rules: {
        mobile: [
          {
            required: true,
            message: '请填写正确的手机号码',
            pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
            trigger: 'change'
          }
        ],
        code: [
          {
            required: true,
            message: '请填写正确的验证码',
            pattern: /^\d{4}$/,
            trigger: 'onchange'
          }
        ]
      }
    }
  },
  methods: {
    onClickLeft () {
      this.$router.push('/find')
    },
    // 发送验证码
    async coded () {
      this.istime = true
      this.time = 60
      clearInterval(this.setTask)
      this.$toast.loading({
        forbidClick: true
      })
      this.setTask = setInterval(() => {
        if (this.time > 1) {
          this.time--
        } else {
          this.time = 60
          clearInterval(this.setTask)
          this.istime = false
        }
      }, 1000)
      const res = await getCode({ mobile: this.mobile })
      this.istime = false
      this.$toast.success(res.data)
    },
    // 登录
    async onSubmit () {
      if (this.isLoading) {
        return
      }
      this.isLoading = true
      try {
        const res = await login({ mobile: this.mobile, code: this.code })
        console.log('登录信息', res)
        this.$store.state.userInfo = res.data.user
        this.isLoading = false
        if (this.$router.path === '/login') {
          this.$router.push('/find')
        } else {
          this.$router.go(-1)
        }
        setLocal(res.data.jwt)
      } catch {
        this.$toast.fail('登录验证码错误')
      }
      this.isLoading = false
    }
  }
}
</script>
<style lang="less" scoped>
.login {
  /deep/.van-nav-bar .van-icon {
    color: #666;
  }
  .logger {
    font-size: 20px;
    font-family: PingFangSC, PingFangSC-Semibold;
    font-weight: 600;
    line-height: 200px;
    color: #222222;
  }
  /deep/ .van-button--default {
    border: 0;
    border-left: 1px solid #ebedf0;
    color: #00b8d4;
  }
  .agree {
    padding-bottom: 44px;
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #181a39;
    line-height: 44px;
    span {
      color: #00b8d4;
    }
  }
}
</style>
